<script setup lang="ts">
interface logInfo {
  timeStamp?: string;
  topic?: string;
  ip?: string;
  port?: string;
  fileName?: string;
  dataCode?: string;
}
const props = withDefaults(
  defineProps<{
    log: logInfo;
  }>(),
  {
    log: () => ({
      timeStamp: "2024-04-17 15:24:12",
      topic: "topic-dataLake",
      ip: "192.168.0.1",
      port: "6443",
      fileName: "test.csv",
      dataCode: "MA.10000.900000.00000003/101000000011/240417152412"
    })
  }
);
</script>

<template>
  <el-row class="log-header">
    {{ props.log.timeStamp }}
  </el-row>
  <el-row class="log-content">
    <p><span>目的地址:</span> {{ props.log.ip }} {{ props.log.port }}</p>
    <p><span>Topic:</span> {{ props.log.topic }}</p>
    <p><span>文件:</span> {{ props.log.fileName }}</p>
    <p><span>数据标识:</span> {{ props.log.dataCode }}</p>
  </el-row>
</template>

<style lang="scss" scoped>
.log-header {
  // border-top-left-radius: 10px;
  // border-top-right-radius: 10px;
  padding-left: 2vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
  // margin-top: 2vh;
  background-color: rgb(214, 227, 255);
  font-weight: bold;
  font-size: 16;
}
.log-content {
  // border-bottom-right-radius: 10px;
  // border-bottom-left-radius: 10px;
  background-color: rgb(242 243 245);
  padding-left: 2vh;
  display: flex;
  flex-flow: column nowrap;
  span {
    font-weight: bold;
  }
}
</style>
